/* eslint-disable react/jsx-no-duplicate-props */
/* eslint-disable no-dupe-keys */
/* eslint-disable no-undef */
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable no-unused-vars */
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Checkbox, Form, Input } from "antd";
import { get_login } from "../api";
import img from "../images/login.png";
function login() {
  const [show, setShow] = useState(false);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [rememberPassword, setRememberPassword] = useState(false);

  useEffect(() => {
    const storedUsername = localStorage.getItem("username");
    const storedPassword = localStorage.getItem("password");
    const storedRememberPassword = localStorage.getItem("rememberPassword");

    if (storedUsername && storedPassword) {
      setUsername(storedUsername);
      setPassword(storedPassword);
    }

    if (storedRememberPassword === "true") {
      setRememberPassword(false);
    }
  }, []);
  const login = () => {
    setShow(true);
    console.log("登录");
  };
  const close = () => {
    setShow(false);
  };
  const onFinish = async (values) => {
    let res = await get_login(values);
    console.log(res, "11111");
    if (res.data.code === 200) {
      alert("登录成功");
      localStorage.setItem("token", res.data.token);
      localStorage.setItem("refreshToken", res.data.refreshToken);
      if (rememberPassword===true) {
        localStorage.setItem("username", values.username);
        localStorage.setItem("password", values.password);
        localStorage.setItem("rememberPassword", "true");
      }
      window.location.href = "/home";
    } else {
      alert("登录失败");
    }
    console.log("Success:", values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  const handleRememberPasswordChange = (e) => {
    setRememberPassword(e.target.checked);
  };
  return (
    <div>
      {show && (
        <div
          className="overlay"
          style={{
            width: "100%",
            height: "100%",
            background: "rgba(0, 0, 0, 0.7)",
            position: "absolute",
            top: "0",
            left: "0",
            zIndex: "99",
          }}
        >
          <div
            style={{
              width: "50vw",
              height: "75vh",
              background: "#fff",
              position: "fixed",
              top: "15%",
              left: "24%",
              borderRadius: "5px",
            }}
          >
            <div style={{ width: "100%", display: "flex" }}>
              <div className="left" style={{ width: "42%", height: "75vh" }}>
                <img
                  src={img}
                  alt=""
                  style={{
                    width: "100%",
                    height: "75vh",
                    borderTopLeftRadius: "5px",
                    borderBottomRightRadius: "5px",
                  }}
                />
              </div>
              <div className="right" style={{ width: "55%" }}>
                <div
                  onClick={close}
                  style={{
                    position: "absolute",
                    cursor: "pointer",
                    top: "10px",
                    color: "#666",
                    right: "10px",
                  }}
                >
                  X
                </div>
                <Form
                  name="basic"
                  labelCol={{
                    span: 8,
                  }}
                  wrapperCol={{
                    span: 16,
                  }}
                  style={{
                    maxWidth: 600,
                    marginTop: 40,
                  }}
                  initialValues={{
                    username,
                    password,
                  }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                      {
                        required: true,
                        pattern: /^[a-zA-Z]{3,10}$/,
                        message: "用户名必须为3-10位的字母组合！",
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                      {
                        required: true,
                        pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
                        message:
                          "密码至少包含一个字母和一个数字，且长度至少为8位！",
                      },
                    ]}
                  >
                    <Input.Password />
                  </Form.Item>

                  <Form.Item
                    wrapperCol={{
                      offset: 8,
                      span: 16,
                    }}
                  >
                    <div>
                      <Checkbox
                        checked={rememberPassword}
                        onChange={handleRememberPasswordChange}
                      >
                        记住密码
                      </Checkbox>
                    </div>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{ marginTop: "30px" }}
                    >
                      Submit
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
        </div>
      )}

      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <img
          src="https://www.baidu.com/img/flexible/logo/pc/result.png"
          alt=""
          style={{ width: "100px", height: "50px" }}
        />
        {localStorage.getItem("token") ? (
          <span>
            {
              <img
                src="https://www.baidu.com/img/flexible/logo/pc/result.png"
                alt=""
                style={{ width: "30px", height: "30px", borderRadius: "50%" }}
              />
            }
          </span>
        ) : (
          <button
            onClick={login}
            style={{
              width: "60px",
              height: "30px",
              background: "blue",
              border: "none",
              color: "#fff",
            }}
          >
            登录
          </button>
        )}
      </div>
    </div>
  );
}

export default login;
